<%-- 
    Document   : newjsp
    Created on : Jun 16, 2011, 5:33:06 PM
    Author     : VcLi
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="_css/global.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="_css/jquery-ui-1.8.13.custom.css"/>
<title>Edit Profile</title>
<script type="text/javascript" src="_scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="_scripts/jquery-ui-1.7.3.custom.min.js"></script>
<script type="text/javascript" src="_scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="_scripts/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="_scripts/jqueryUI_customized.js"></script>
<link href="_css/editProfile.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
  <div id="header"> <a href="index.html">
    <div id="logo"></div>
    </a>
    <div id="login">
      <form action="" method="post">
        <label>Userid: </label>
        <input name="userid" type="text" class="loginbar"/>
        <label>Password: </label>
        <input name="passsword" type="text" class="loginbar"/>
        <input name="rememberMe" type="checkbox" value="" />
        <label>Remember Me </label>
        <input type="submit" value=""id="loginIcon"/>
      </form>
    </div>
    
    <!--if else statement here-->
    <div id="afterLogin">
      <ul>
        <li><a href="#"> <img src="_images/globalImages/profile.png" width="90" height="80" alt="profile" /></a>
          <h3>Profile</h3>
        </li>
        <li> <a href="resources.html"><img src="_images/indexImages/resources.png" width="90" height="80" alt="resources" /></a>
          <h3>Resources</h3>
        </li>
        <li> <a href="#"><img src="_images/globalImages/event.png" width="90" height="80" alt="event" /></a>
          <h3>Event</h3>
        </li>
        <li></li>
      </ul>
    </div>
    <div id="searchbar">
      <p>
        <input id="searchMain" name="search" type="text" />
      </p>
      <ul>
        <li><a href="www.baidu.com">Search</a></li>
        <li><a href="www.baidu.com">Advance</a> </li>
      </ul>
    </div>
  </div>
  <div id="border">
    <div id="main">
      <div id="left"> </div>
      <div id="right">
        <h1>Edit Profile</h1>
        <p class="pNavSpace">You are at : <a href="index.jsp">e-Oasis</a> --> <a href="#">Profile</a> --> Edit Profile</p>
        <div id="profileTabs">
          <ul>
            <li><a href="#tabs-basicInfo">Basic Information</a></li>
            <li><a href="#tabs-contactInfo">Contact</a></li>
            <li><a href="#tabs-eduInfo">Education</a></li>
            <li><a href="#tabs-workInfo">Work</a></li>
          </ul>
          <div id="tabs-basicInfo">
            <form method="post" action="../ManageProfileServlet">
              <label for="acName"><span>Assigned ID: </span>
                <input name="acName" value="<jsp:getProperty name="userInfo" property="acName"/>"
                           type="text" disabled>
              </label>
              <label for="userName"><span> User Name: </span>
                <input name="userName" value="<jsp:getProperty name="userInfo" property="userName"/>"
                           type="text">
              </label>
              <label for="acType"><span>Account Type:</span>
                <input name="acType" value="<jsp:getProperty name="userInfo" property="acType"/>"
                                         type="text">
              </label>
              <!-- JSTL used here to create a combo box           -->
              <label for="sex"><span> Sex:</span>
                <select name="sex">
                  <c:choose>
                    <c:when test="${userInfo.sex == 'M'}">
                      <option value="M" selected>M</option>
                      <option value="F" >F</option>
                    </c:when>
                    <c:when test="${userInfo.sex == 'M'}">
                      <option value="M" >M</option>
                      <option value="F" selected>F</option>
                    </c:when>
                    <c:otherwise>
                      <option value="" selected></option>
                      <option value="M" >M</option>
                      <option value="F" >F</option>
                    </c:otherwise>
                  </c:choose>
                </select>
              </label>
              
              <!--Using the datePicker from jQuery UI             -->
              <label for="datepicker1"><span> Birthday:</span>
                <input id="datepicker1" name="DOB" value="${userInfo.DOB}"
                                     type="text">
              </label>
              <label for="maritalStatus"><span> Marital Status:</span>
                <input name="maritalStatus" value="${userInfo.maritalStatus}"
                                           type="text">
              </label>
              <label for="bloodType"> <span> Blood Type :</span>
                <input name="bloodType" value="<jsp:getProperty name="userInfo" property="bloodType"/>"
                                       type="text">
              </label>
              <label for="hometown"><span>Home Town:</span>
                <input name="hometown" value="<jsp:getProperty name="userInfo" property="hometown"/>"
                                      type="text">
              </label>
              <label for="currentLocation"> <span>Current Location:</span>
                <input name="currentLocation" value="<jsp:getProperty name="userInfo" property="currentLocation"/>"
                                             type="text">
              </label>
              
              <!--            <a href="ContactInfo.jsp">Next Page<br>-->
              <div>
                <input value="Save" type="submit">
                <input value="Cancel" type="reset">
                <input type="hidden" name="acCondition" value="basicInfo">
              </div>
            </form>
          </div>
          <div id="tabs-contactInfo">
            <form method="post" action="../ManageProfileServlet">
              <label for="hp"><span>HP:</span>
                <input name="hp" value="<jsp:getProperty name="userInfo" property="hp"/>"
                               type="text">
              </label>
              <label for="emailAddress"><span>Email Address:</span>
                <input name="emailAddress" value="<jsp:getProperty name="userInfo" property="emailAddress"/>"
                                          type="text">
              </label>
              <label for="msn"><span>MSN:</span>
                <input name="msn" value="<jsp:getProperty name="userInfo" property="msn"/>"
                                type="text">
              </label>
              
              <!--            <a href="workInfo.jsp">Next Page<br>-->
              
              <div>
                <input value="Save" type="submit">
                <input value="Cancel" type="reset">
                <input type="hidden" name="acCondition" value="contactInfo">
              </div>
            </form>
          </div>
          <div id="tabs-eduInfo">
            <form method="post" action="../ManageProfileServlet">
              <label for="school"><span>School:</span>
                <input name="school" value="<jsp:getProperty name="userInfo" property="school"/>"
                                   type="text">
              </label>
              <label for="schlClass"> <span> Class:</span>
                <input name="schlClass" value="<jsp:getProperty name="userInfo" property="schlClass"/>"
                                  type="text">
              </label>
              <!--Using the datePicker from jQuery UI             -->
              <label for="enrollmentDay"><span>Year:</span>
                <input id="datepicker2" name="enrollmentDay" value="<jsp:getProperty name="userInfo" property="enrollmentDay"/>"
                                 type="text">
              </label>
              <div>
                <input value="Save" type="submit">
                <input value="Cancel" type="reset">
                <input type="hidden" name="acCondition" value="eduInfo">
              </div>
            </form>
          </div>
          <div id="tabs-workInfo">
            <form method="post" action="../ManageProfileServlet">
              <label for="company"><span>Company:</span>
                <input name="company" value="<jsp:getProperty name="userInfo" property="company"/>"
                                    type="text">
              </label>
              <label for="department"> <span>Department:</span>
                <input name="department" value="<jsp:getProperty name="userInfo" property="department"/>"
                                       type="text">
              </label>
              
              <!--Using the datePicker from jQuery UI             -->
              <label for="datepicker3"><span>Started Working from:</span>
                <input id="datepicker3" name="workDay" value="<jsp:getProperty name="userInfo" property="workDay"/>"
                                                 type="text">
              </label>
              <div>
                <input value="Save" type="submit">
                <input value="Cancel" type="reset">
                <input type="hidden" name="acCondition" value="workInfo">
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
  <div id="footer">
    <div id="copyright">@Team e-Oasis! Rocks</div>
    <div id="payment"></div>
  </div>
  <div id="footerend"></div>
</div>
</body>
</html>